<template>
  <div class="container">
    <div class="orderList">
      <div class="orderItem" @click="toDetail">
        <div class="header">
          <span class="orderNum">订单编号：201920152365258</span>
          <span class="status">预付成功</span>
        </div>
        <div class="itemBody">
          <div class="code">FSYX1254365</div>
          <div class="title">核销码</div>
        </div>
        <div class="footer">
          <span>万元红包券</span>
          <span style="float:right">
            张晓明
            <span style="padding-left:.1rem">15156508950</span>
          </span>
        </div>
      </div>

      <div class="orderItem">
        <div class="header">
          <span class="orderNum">订单编号：201920152365258</span>
          <span class="status">预付成功</span>
        </div>
        <div class="itemBody">
          <div class="code">FSYX1254365</div>
          <div class="title">核销码</div>
        </div>
        <div class="footer">
          <span>万元红包券</span>
          <span style="float:right">
            张晓明
            <span style="padding-left:.1rem">15156508950</span>
          </span>
        </div>
      </div>

      <div class="orderItem">
        <div class="header">
          <span class="orderNum">订单编号：201920152365258</span>
          <span class="status">预付成功</span>
        </div>
        <div class="itemBody">
          <div class="code">FSYX1254365</div>
          <div class="title">核销码</div>
        </div>
        <div class="footer">
          <span>万元红包券</span>
          <span style="float:right">
            张晓明
            <span style="padding-left:.1rem">15156508950</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        toDetail(){
            this.$router.push("/orderDetail")
        }
    },
};
</script>

<style lang="scss" scoped>
.container {
  padding-left: 0.16rem;
  padding-right: 0.16rem;
  .orderList {
    .orderItem {
      padding: 0.16rem 0.12rem 0 0.12rem;
      background-color: #ffffff;
      margin-top: 0.14rem;
      padding-bottom: 0.16rem;
      border-radius: 2px 2px 0px 0px;
      margin-bottom: .1rem;
      .header {
        padding-bottom: 0.16rem;
        border-bottom: 1px solid rgba(232, 232, 232, 1);
        .orderNum {
          font-size: 0.13rem;
          font-family: PingFangTC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        .status {
          font-size: 0.14rem;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(230, 0, 32, 1);
          float: right;
        }
      }
      .itemBody {
        .code {
          margin-top: 0.2rem;
          font-size: 0.24rem;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          text-align: center;
        }
        .title {
          text-align: center;
          font-size: 0.13rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          padding-bottom: 0.16rem;
          border-bottom: 1px solid rgba(232, 232, 232, 1);
        }
      }
      .footer {
        margin-top: 0.16rem;
        font-size: 0.13rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color:rgba(102,102,102,1);
      }
    }
  }
}
</style>

